<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<button @click="age++">年龄+1</button>
			<h2>年龄为{{age}}</h2>
			<button @click="addSex">添加性别属性，默认值：男</button>
			<h2 v-if="school.sex">性别为{{school.sex}}</h2><br>
			<button @click="addFriend">在列表首位添加一个朋友</button>
			<ul>
				<li v-for="(f,index) in friends" :key="index">
					{{f.name}}---{{f.age}}
				</li>
			</ul>
			<button @click="changeFriend">修改第一个朋友的名字为张三</button><br>
			<button @click="addHobby">添加一个爱好</button>
			<ul>
				<li v-for="(h,index) in hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<button @click="changeHobby">修改第一个爱好为开车</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#root',
				data: {
					age: 18,
					school: {
						name: '邹宜臻',
						address: '厕所'
					},
					friends: [{
						name: '游德丰',
						age: 19
					}, {
						name: '吴行彬',
						age: 19
					}],
					hobby: ['臭豆腐', '腐乳', '老干妈']
				},
				methods: {
					addSex() {
						this.$set(this.school, 'sex', '男')
					},
					addFriend() {
						this.friends.unshift({
							name: '徐有邦',
							age: 21
						})
					},
					changeFriend() {
						this.friends.splice(0, 1, {
							name: '张三',
							age: 22
						})
					},
					addHobby() {
						this.hobby.push('奥里给')
					},
					changeHobby() {
						this.hobby.splice(0, 1, '开车')
					}
				}
			})
		</script>
	</body>
</html>
